<template>
  <div id="parentNode" class="code-page">
    <a-row :gutter="10" style="height: 10%">
      <a-col :span="12">
        <a-space direction="historical" size="small">
          <div class="select">
            <a-dropdown
              @select="changeLanguage"
              :size="'large'"
              style="margin-right: 20px"
            >
              <a-button
                >{{ editerInfo.language }}语言<i class="iconfont icon-xia"
              /></a-button>
              <template #content>
                <a-doption :value="'java'">
                  <a-tag color="#13c2c2"
                    ><i class="iconfont icon-java" />java
                  </a-tag>
                </a-doption>
                <a-doption :value="'python'">
                  <a-tag color="#40a9ff"
                    ><i class="iconfont icon-Python" />python
                  </a-tag>
                </a-doption>
                <a-doption :value="'cpp'">
                  <a-tag color="#597ef7"
                    ><i class="iconfont icon-cpp" />cpp
                  </a-tag>
                </a-doption>
                <a-doption :value="'c'">
                  <a-tag color="#9254de"
                    ><i class="iconfont icon-c" />c语言
                  </a-tag>
                </a-doption>
              </template>
            </a-dropdown>
          </div>
          <div class="select">
            <a-dropdown
              @select="changeTheme"
              :size="'large'"
              style="margin-right: 20px"
            >
              <a-button
                >{{ editerInfo.theme }}主题<i class="iconfont icon-xia"
              /></a-button>
              <template #content>
                <a-doption :value="'vs'">
                  <a-tag color="#d9d9d9">vs</a-tag>
                </a-doption>
                <a-doption :value="'vs-dark'">
                  <a-tag color="#120338">vs-dark</a-tag>
                </a-doption>
                <a-doption :value="'hc-black'">
                  <a-tag color="#820014">hc-black</a-tag>
                </a-doption>
              </template>
            </a-dropdown>
          </div>
        </a-space>
      </a-col>
      <a-col :span="3">
        <a-form-item>
          <a-button
            @click="saveCode"
            size="mini"
            type="primary"
            status="success"
            ><i class="iconfont icon-baocun" @click="saveCode" />保存
          </a-button>
        </a-form-item>
      </a-col>
      <a-col :span="3">
        <a-form-item>
          <a-button
            @click="getCode(editerInfo.value, editerInfo.language)"
            size="mini"
            type="primary"
            status="warning"
            ><i class="iconfont icon-tijiao" />上传
          </a-button>
        </a-form-item>
      </a-col>
      <a-col :span="3">
        <a-form-item>
          <a-button @click="handleClick" size="mini" type="primary"
            ><i class="iconfont icon-zhihuizhushou-copy-copy" />智能分析
          </a-button>
        </a-form-item>
      </a-col>
    </a-row>
    <div id="code-editor" ref="codeEditorRef" />
    <a-drawer
      :visible="visible"
      @ok="handleOk"
      placement="left"
      width="600px"
      @cancel="handleCancel"
    >
      <template #title
        ><i class="iconfont icon-zhihuizhushou-copy-copy" style="color: blue" />
        小梦智慧助手
      </template>
      <WatchMdEdier v-if="visible" :text="aiTargetCode" />
      <a-spin
        :loading="loading"
        style="width: 100%; height: 100%"
        tip="这可能需要消耗一些时间..."
      >
        <WatchMdEdier
          v-if="!loading && resultCodeAnalyse != ''"
          :text="resultCodeAnalyse"
        />
      </a-spin>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import * as monaco from "monaco-editor";
import { onMounted, reactive, ref, toRaw } from "vue";
import message from "@arco-design/web-vue/es/message";
import WatchMdEdier from "@/components/question/WatchMdEdier.vue";
import { QuestionSubmitControllerService } from "../../../generated";

const codeEditorRef = ref();
const codeEditor = ref();
const value = ref();

const editerInfo = reactive({
  value: value.value,
  language: "java",
  automaticLayout: true,
  colorDecorators: true,
  minimap: {
    enabled: true,
  },
  readOnly: false,
  theme: "vs",
  scrollBeyondLastLine: false,
});

let loading = ref(false);

let resultCodeAnalyse = ref("");
onMounted(() => {
  if (!codeEditorRef.value) {
    return;
  }
  // Hover on each property to see its docs!
  codeEditor.value = monaco.editor.create(codeEditorRef.value, editerInfo);
});

let aiTargetCode = ref("");

function changeLanguage(language: string) {
  if (language == "cpp") {
    editerInfo.language = "c++";
  } else {
    editerInfo.language = language;
  }
  monaco.editor.setModelLanguage(toRaw(codeEditor.value).getModel(), language);
}

function changeTheme(theme: string) {
  editerInfo.theme = theme;
  monaco.editor.setTheme(theme);
}

function saveCode() {
  try {
    editerInfo.value = toRaw(codeEditor.value).getValue();
    message.success("代码保存成功");
  } catch (error) {
    message.error("代码保存失败");
  }
}

// eslint-disable-next-line no-undef
defineProps(["getCode"]);

const visible = ref(false);

const handleClick = () => {
  aiTargetCode.value =
    "```" + editerInfo.language + "\n" + editerInfo.value + "\n```";
  visible.value = true;
};

const analyseCode = async (code: string) => {
  loading.value = true;
  let cancelablePromise =
    await QuestionSubmitControllerService.analyzeCodeUsingPost(code);
  loading.value = false;
  if (cancelablePromise.code == 0 && cancelablePromise.data != "") {
    resultCodeAnalyse.value = cancelablePromise.data;
    message.success("代码分析成功");
  } else {
    message.error("代码分析失败");
  }
};
const handleOk = async () => {
  await analyseCode(editerInfo.value);
};
const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped>
#code-editor {
  border-radius: 2ch;
  margin-top: 10px;
  height: 90%;
  border: 2px solid #f0f0f0;
}

.button:active {
  background: #74c0fc;
}

.code-page {
  background-color: white;
  width: 100%;
  height: 100%;
  padding: 2px;
}

.select {
  display: flex;
  margin-right: 10px;
}
</style>
